<template>
  <div :class="['section', 'join_feast']" @click="unmagnify">
    <feast ref="feast"
           :master="$route.params.master"
           :userInfo="userInfo"
           @onSitDown="sitDown">
    </feast>
    <p class="tip" v-if="$refs.feast ? !$refs.feast.isActive : ''">
      您是第<em>{{$refs.feast ? $refs.feast.userJoinInfo.num : ''}}</em>位宾客，
      目前已有<em>{{$refs.feast ? $refs.feast.joinCount : ''}}</em>位宾客入席
    </p>
    <p :class="['tip', 'active']" v-else>
      <span v-if="$refs.feast && typeof $refs.feast.userJoinInfo.desk === 'number'">
        你已成功入席<br>
        您的座位是
        第<em>{{$refs.feast ? (
          $refs.feast.userJoinInfo.desk === 0 ? '主宾' : $refs.feast.userJoinInfo.desk
        ) : ''}}</em>桌
        第<em>{{$refs.feast ? $refs.feast.userJoinInfo.seat + 1 : ''}}</em>位
      </span>
      <span v-else>你尚未入席，赶紧加入吧！</span>
    </p>
    <home></home>
    <dialogs ref="dialogs"
             :msg="currentDialogs.msg ? currentDialogs.msg.replace(
                 '{{masterName}}', $refs.feast ? $refs.feast.masterFeast.name : '') : ''"
             :btns="currentDialogs.btns">
    </dialogs>
  </div>
</template>

<script>
  import feast from '@/components/feast';
  import dialogs from '@/components/dialogs';
  import home from '@/components/home';

  export default {
    name: 'joinFeast',
    data: function () {
      return {
        getUserInfoPath: 'static/data/my_info.json',
        userInfo: null,
        currentDialogs: {},
        dialogs: {
          init: {
            msg: '欢迎来到<em>{{masterName}}</em>的囍宴',
            btns: [
              {
                value: '我要入席',
                href: 'close'
              },
              {
                value: '查看宴席排行榜',
                href: '/join_feast/ranklist'
              },
              {
                value: '我也要制作我的宴席',
                href: '/index'
              }
            ]
          },
          sitDown: {
            msg: '为Ta收集更多新婚祝福！'
          }
        }
      }
    },
    components: {
      feast,
      dialogs,
      home
    },
    methods: {
      unmagnify: function () {
        let feast = this.$refs.feast;
        feast && feast.isActive ? feast.unmagnify() : '';
      },
      sitDown: function () {
        this.$set(this, 'currentDialogs', this.dialogs.sitDown);
        this.$set(this.$refs.dialogs, 'isShow', true);
      }
    },
    created: function () {
      axios.get(this.getUserInfoPath).then((res) => {
        this.$set(this, 'userInfo', res.data.myInfo);
        if (this.$route.params.master === this.userInfo.id) {
          this.$router.push('/join_rank');
        }
        this.$set(this, 'currentDialogs', this.dialogs.init);
        setTimeout(() => {
          this.$set(this.$refs.dialogs, 'isShow', true);
        }, 300);
      }).catch((error) => {
        console.log(error);
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .join_feast {
    padding-top: setRem(64px);

    .tip {
      color: #e7c598;
      font-size: setRem(20px);
      text-align: center;
      margin: auto setRem(45px);
      margin-top: setRem(28px);

      &.active {
        margin-top: setRem(-100px);
      }

      em {
        display: inline-block;
        border-bottom: 1px solid #e7c598;
        font-size: 1.2em;

        &:not(:empty) {
          padding: 0 setRem(4px);
        }
      }
    }
  }
</style>
